<template>
    <div id='Contact' class="tl-overflow-hidden">
        <el-tooltip :enterable="false" content="访问我的GitHub" :placement="this.placement">
            <el-button class="tl-margin-0-10" @click="link('https://github.com/lzyws739307453')" size="small" type="info"
                       icon="iconfont icon-git" circle></el-button>
        </el-tooltip>
        <el-popover popper-class="tl-padding-5 tl-height-150" :placement="this.placement" trigger="hover">
            <img class="tl-height-150" src="~@/assets/images/QQ.png" alt="">
            <el-button slot="reference" class="tl-margin-0-10" size="small" type="primary" icon="iconfont icon-qq" circle></el-button>
        </el-popover>
        <el-popover popper-class="tl-padding-5 tl-height-150" :placement="this.placement" trigger="hover">
            <img class="tl-height-150" src="~@/assets/images/WeChat.png" alt="">
            <el-button slot="reference" class="tl-margin-0-10" size="small" type="success" icon="iconfont icon-wechat" circle></el-button>
        </el-popover>
        <el-tooltip :enterable="false" content="关注我的CSDN" :placement="this.placement">
            <el-button class="tl-margin-0-10" @click="link('https://lzyws739307453.blog.csdn.net/')" size="small" type="danger"
                       icon="iconfont icon-logo_csdn" circle></el-button>
        </el-tooltip>
    </div>
</template>

<script>
export default {
    name: 'Contact',
    props: ['placement'],
    components: {},
    data: function () {
        return {}
    },
    methods: {
        link: function (url) {
            window.open(url, '_blank')
        }
    },
    created: function () {
    }
}
</script>

<style lang='less' scoped>
img {
    //margin: 3px;
    border-radius: 6px !important;
}

</style>
